A friend of mine and a skilled developer, Marc-Antoine Ross from DevTaxi, did a great review of Web 2.0 forms and I think it’s worth reading! So here it goes:
I decided to review the registration forms from most of the sites that made it to the invaluable Web 2.0 Awards.
Most of the registration forms were very disappointing.
- Some will validate on submit, but will display very unclear messaging to the user when an error occurred
- Some look like an entry form to the FBI (Yahoo!)
- Some display the password in clear text in the form!
- Most of the registration forms had no JavaScript / AJAX validation at all.
My Recommendations
- What can be validated through JavaScript should be done on submit or on change (email, password match, password strength)
- What can be validated through AJAX (username availability, email already registered) is a nice to have
- On submit, all errors will be reported at once with invalid fields highlighted, instead of stopping after each error found
- Each field’s requirements should be displayed near the field
- Focus should be clearly changed to inform the user of the error to be corrected (focus to the first error found in the form)
- Error messages should be clearly visible. Different colors for errors than positive feedback. Feedback containers should be positioned in such a way the form doesn’t shift down when messages are changed.
- An input’s background and border color should be changed (to red) on error and its border to bold when focused.
- Terms should be “Sign in” and “Register”. I find “Sign in” and “Sign up” too confusing. Where do I start again? Oh, that X at the top right
- Use labels in your forms!
A Few Good Examples:
1.Validates inputs on change, suggests improvements / errors. Not visually attractive.
2.Simple and efficient
3.Nicely designed, good level of feedback to the user
4.I like the information provided to the user for each input
Again, thanks Marc-Antoine. Do you guys have any other recommendations or suggestions?
